<template>
  <el-switch
    v-if="props.darkMode === 'switchMode'"
    v-model="theme.darkMode"
    inline-prompt
    :active-icon="IconMdiWhiteBalanceSunny"
    :inactive-icon="IconMdiMoonWaningCrescent"
    @change="(val: Boolean)=> toggleDark(val as boolean)"
  />
  <div
    v-else
    class="p-3"
    @click="handelDark"
  >
    <Icon :icon="theme.darkMode ? 'mdi:moon-waning-crescent' : 'mdi:white-balance-sunny'" />
  </div>
</template>

<script setup lang='ts'>
import { useThemeStore } from '@/store';
import { useDark, useToggle } from '@vueuse/core';
import { Icon } from '@iconify/vue';
import IconMdiWhiteBalanceSunny from '~icons/mdi/white-balance-sunny';
import IconMdiMoonWaningCrescent from '~icons/mdi/moon-waning-crescent';

const props = defineProps({
  darkMode: {
    type: String,
    default: 'switchMode'
  }
});

const theme = useThemeStore();
const isDark = useDark();
const toggleDark = useToggle(isDark);

const handelDark = () => {
  toggleDark(!theme.darkMode);
  theme.setDarkMode(!theme.darkMode);
};

</script>
<style scoped>

</style>
